<template>
    <ul class="list" >
      <li
       v-for="key of alphs"
       :key="key"
       @click="$emit('select', key)"
       @touchmove="handscroll"
       :ref="key"
       >{{key}}
      </li>
    </ul>
</template>

<script>
export default { //  组件配置项
  name: 'AlphaBetical',
  props: {
    cities: Object
  },
  methods: {
    handscroll (e) {
      let mouseY = e.touches[0].pageY
      let Totop = this.$refs['A'][0].offsetTop
      console.log(Totop)
      let toheader = (mouseY - 93) - Totop
      let index = Math.floor(toheader / 20)
      let curletter = this.alphs[index]
      this.$emit('getaph', curletter)
    }
  },
  computed: {
    alphs () {
      let arr = []
      for (let key in this.cities) {
        arr.push(key)
      }
      return arr
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .list
    float left
    right 0
    position fixed
    height 17.34rem
    display flex
    flex-direction column
    justify-content center
    z-index -1
    li
      color #00BCD4
      line-height 0.4rem
      font-size 0.3rem
</style>
